React useFormStatus asynkron validering: Asynkrone skjema-statusoppdateringer

I moderne webutvikling er skjemaer et avgjørende element for brukerinteraksjon. Å sikre datakvalitet og gi tilbakemelding i sanntid er avgjørende for en positiv brukeropplevelse. Reacts useFormStatus-hook, introdusert i React 18, tilbyr en kraftig og elegant måte å håndtere statusen for skjemainnsendinger på, spesielt ved asynkron validering. Denne artikkelen dykker ned i detaljene rundt useFormStatus, med fokus på asynkrone valideringsscenarioer, gir praktiske eksempler og skisserer beste praksis for å lage robuste og brukervennlige skjemaer.

Forstå det grunnleggende i useFormStatus

useFormStatus-hooken gir informasjon om den siste skjemainnsendingen som ble utløst av en eller innenfor et <form>. Den returnerer et objekt med følgende egenskaper:

• pending: En boolsk verdi som indikerer om skjemainnsendingen for øyeblikket er ventende.
• data: Dataene knyttet til skjemainnsendingen, hvis tilgjengelig.
• method: HTTP-metoden som brukes for skjemainnsendingen (f.eks. 'get' eller 'post').
• action: Funksjonen som brukes som skjemaets handling (action).

Selv om den virker enkel, blir useFormStatus utrolig verdifull når man håndterer asynkrone operasjoner, som å validere brukerinput mot en ekstern server eller utføre komplekse datatransformasjoner før innsending.

Behovet for asynkron validering

Tradisjonell synkron validering, der sjekker utføres umiddelbart i nettleseren, er ofte utilstrekkelig for virkelige applikasjoner. Vurder disse scenariene:

• Brukernavn-tilgjengelighet: Å verifisere om et brukernavn allerede er tatt, krever et oppslag i databasen.
• E-postverifisering: Å sende en verifiserings-e-post og bekrefte dens gyldighet krever interaksjon på serversiden.
• Betalingsbehandling: Validering av kredittkortdetaljer innebærer kommunikasjon med en betalingsgateway.
• Adresseautofullføring: Å foreslå adressealternativer mens brukeren skriver, krever kall til et eksternt API.

Disse scenariene innebærer i seg selv asynkrone operasjoner. useFormStatus, i kombinasjon med asynkrone funksjoner, lar oss håndtere disse valideringene elegant, og gir umiddelbar tilbakemelding til brukeren uten å blokkere brukergrensesnittet.

Implementering av asynkron validering med useFormStatus

La oss utforske et praktisk eksempel på validering av brukernavn-tilgjengelighet asynkront.

Eksempel: Asynkron validering av brukernavn

Først lager vi en enkel React-komponent med et skjema og en send-knapp.

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simulate an API call to check username availability
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

    const isAvailable = username !== 'taken'; // Mock availability check

    if (!isAvailable) {
      throw new Error('Username is already taken.');
    }

    console.log('Username is available!');
    // Perform actual form submission here
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Submitting..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy